<template>
    <el-dialog v-model="dialogData.visible" :title="dialogData.title" center width="66%" top="10vh" :close-on-click-modal="false" append-to-body>
        <div class="dialog-content">
            <el-form :inline="true" :model="searchform">
                <div class="flex justify-between mb-3">
                    <el-space>
                        <el-button size="default" type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                        <el-button :icon="Refresh" @click="getList">刷新</el-button>
                    </el-space>
                    <el-space>
                        <el-select v-model="searchform.status" placeholder="审核状态" style="width:200px" clearable>
                            <el-option v-for="item in [{label:'已审核',value:1},{label:'待审核',value:0}]" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
                    </el-space>
                </div>
            </el-form>


            <el-table :data="tableData" border>
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column label="图片/视频" align="center">
                    <template #default="scope">
                        <template v-for="item of scope.row.resources">
                            <el-image v-if="isImg(item)" :src="item" fit="fill" :preview-src-list="[item]" preview-teleported style="width:120px;height:96px; object-fit: cover;margin:0 5px;"></el-image>
                            <video v-if="isVideo(item)" :src="item" controls autoplay muted class="thumb" style="width:120px;height:96px; object-fit: cover;margin:0 5px;"></video>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120" align="center">
                    <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.status === 0">待审核</el-tag>
                        <el-tag type="success" v-else>审核通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="updatedAt" label="更新时间" width="200" align="center"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)"/>
                        </el-tooltip>

                        <el-tooltip content="编辑" placement="top">
                            <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)"/>
                        </el-tooltip>

                        <el-tooltip content="审核" placement="top" v-if="scope.row.status === 0">
                            <el-button type="success" :icon="Promotion" circle plain @click="handleApprove(scope.row)"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>

    <dialog-material-add-edit ref="dialog-material-add-edit-ref" :motion-id="dialogData.motionId" @update="getList"></dialog-material-add-edit>
</template>


<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { nextTick, reactive, ref, useTemplateRef, onMounted } from 'vue'
import motionMaterialApi from 'api/model/motion-material.js'
import { Delete, Plus, Promotion, Refresh, Search, Edit } from '@element-plus/icons-vue'
import motionApi from 'api/model/motion.js'
import DialogMaterialAddEdit from '../platform-motion-material/dialog-material-add-edit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { isImg, isVideo } from '@/utils/util.js'

const emits = defineEmits(['update'])
defineExpose({ openDialog })

// 编辑相关数据
const dialogData = reactive({
    title: '动作素材',
    visible: false,
    motionId: ''
})

/**
 *  获取素材列表
 */
const searchform = reactive({
    status: ''
})
const tableData = ref([])
const getList = async () => {
    const { code, data = [] } = await motionMaterialApi.list.get({
        motionId: dialogData.motionId,
        status: searchform.status,
        page: 1,
        size: 99
    })
    tableData.value = data?.list ?? []
}
/**
 * 打开弹框
 * @param type
 * @param item
 */
const dialogMaterialAddEditRef = useTemplateRef('dialog-material-add-edit-ref')

function openDialog (type, item) {
    if (type === 'material') {
        dialogData.visible = true
        dialogData.motionId = item.id
        getList()
    }

    if (type === 'add' || type === 'update') {
        // 添加或编辑
        dialogMaterialAddEditRef.value.openDialog(type, item)
    }
}

/**
 * 审核处理
 * @param item
 */
const handleApprove = (item) => {
    ElMessageBox.confirm('确定要审核通过吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        approveItem(item)
    }).catch(() => {
        ElMessage.info('已取消审核')
    })
}
const approveItem = async (item) => {
    const { code } = await motionMaterialApi.update.post({
        id: item.id,
        status: 1
    })
    if (code === 200) {
        ElMessage.success('审核成功')
        getList()
    }
}

/**
 * 删除操作
 * @param item
 */
const handleDelete = (item) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteItem(item)
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

const deleteItem = async (item) => {
    const { code } = await motionMaterialApi.delete.post({
        id: item.id
    })
    if (code === 200) {
        ElMessage.success('删除成功')
        getList()
    }
}


</script>

<style lang="less">

</style>
